<template>
    <el-dialog
        title="导出PDF"
        :visible="dialogVisible"
        width="60%"
        :fullscreen="true"
        :close-on-click-modal="false"
        :center="true"
        top="0"
        style="padding: 0"
        :destroy-on-close="true"
    >
        <div style="display: flex; justify-content: center">
        <div id="pdfDomD" ref="print">
            <div
            class="A4page"
            v-for="(item, index) in listData"
            :key="index + 10220"
            >
            <img src="@/assets/logo/pdfbg.png" alt="" />
            
            <div class="pagesContent">
                <div class="pagesContentItem">
                <div class="pagesContentTitle">
                  <span v-if="item.gz=='职业卫生'">职业卫生培训合格证</span>
                  <span v-else>培训学时证明</span>
                </div>
                <div
                    class="pagesContentitemInfor"
                >
                    <ul>
                    <li class="Title">姓名</li>
                    <i>:</i>
                    <li class="Name">{{ item.nickname }}</li>
                    </ul>
                    <ul>
                    <li class="Title">性别</li>
                    <i>:</i>
                    <li class="Name">{{ item.gender }}</li>
                    </ul>
                    <ul>
                    <li class="Title">身份证号</li>
                    <i>:</i>
                    <li class="Name">{{ item.username }}</li>
                    </ul>
                    <ul>
                    <li class="Title">培训科目</li>
                    <i>:</i>
                    <li class="Name">
                        职业卫生培训
                    </li>
                    </ul>
                    <ul>
                    <li class="Title">培训类型</li>
                    <i>:</i>
                    <li class="Name">
                        {{ item.exam_type }}
                    </li>
                    </ul>
                    <ul>
                    <li class="Title">人员类别</li>
                    <i>:</i>
                    <li class="Name">
                        {{ item.subjectTitleFull.includes('初培')?item.subjectTitleFull.split('初培')[0]:item.subjectTitleFull.includes('复审')?item.subjectTitleFull.split('复审')[0]:'' }}
                    </li>
                    </ul>
                    <ul>
                    <li class="Title">公司名称</li>
                    <i>:</i>
                    <li class="Name">{{ item.company }}</li>
                    </ul>
                    <!--       :src="item.exam_face" -->
                    <div
                    class="imgBox"
                    v-if="item.face"
                    >
                    <div style="margin-right: 20px" v-if="item.face">
                        <div>
                        <img :src="item.face" alt="" />
                        </div>
                        <p>人脸底片</p>
                    </div>

                    <!-- <div
                    >
                        <div>
                        <img :src="item.exam_face" alt="" />
                        </div>
                        <p>考试照片</p>
                    </div> -->
                    </div>
                </div>
                <div class="pagesContentitemRocer">
                    学员{{ item.nickname }}于{{
                    item.start_time
                    }}
                    <!-- start_time -->
                    ——
                    {{
                    item.score_finish_time
                    }}职业卫生培训班完成线上学习要求，并考试合格。特发此证，以此证明。
                </div>
                <div class="pagesContentitemXs">
                    <span class="pagesContentitemXsSpan"
                    >培训内容：合计{{ item.score_sum }}学时</span
                    >
                    <div class="tableBox">
                    <div
                        :class="
                        index % 2 == 0
                            ? item.score_loglist.length % 2 == 0
                            ? index == item.score_loglist.length - 2
                                ? 'table beforeBorder bottomBorder'
                                : 'table beforeBorder'
                            : index == item.score_loglist.length - 1
                            ? 'table beforeBorder bottomBorder'
                            : 'table beforeBorder'
                            : item.score_loglist.length % 2 == 0
                            ? index == item.score_loglist.length - 1
                            ? 'table bottomBorder'
                            : 'table'
                            : index == item.score_loglist.length - 2
                            ? 'table bottomBorder'
                            : 'table'
                        "
                        v-for="(itemA, index) in item.score_loglist"
                        :key="itemA.msid"
                    >
                        <p>{{ itemA.mstitle?itemA.mstitle:itemA.title }}</p>
                        <span>{{ itemA.score }}学时</span>
                    </div>
                    </div>
                </div>
                <div
                    class="pagesContentitemFs"
                >
                    <div>
                    <p>{{ item.subjectTitle }}培训考试题库(80分合格)</p>
                    <span>合格</span>
                    </div>
                </div>
                
                <div class="pagesContentitemFooter">
                    <div class="pagesContentitemFooterBox">
                    <div class="pagesContentitemFooterBoxLeft">
                        <p>证书编号:</p>
                        <span>{{ item.cert_num }}</span>
                    </div>
                    <!-- 二维码 -->
                    <!-- <img
                        class="erweima"
                        :src="erma"
                        alt=""
                    />
                    <img
                        class="erweima"
                        :src="item.resourceserma"
                        alt=""
                        style="left:18%;"
                    /> -->
                    <div class="pagesContentitemFooterBoxRight">
                        <p>发证时间:</p>
                        <span>{{ item.score_finish_time }}</span>
                    </div>
                    </div>
                    <!-- 印章  v-if="!qyType('whtl')"  -->
                    <!-- <img
                    style="left: 50%"
                    src="@/assets/zhang/tjyx.png"
                    alt=""
                    /> -->
                    <img
                    :src="sealImgList(baseURL, listData[0].gz)"
                    alt=""
                    v-if="sealImgList(baseURL, listData[0].gz)"
                    />
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" v-print="'#pdfDomD'">打印证书</el-button>
            <el-button type="primary" @click="getPdf()">导出PDF证书</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            htmlTitle: '证书打印',
            fromData:{
                nickname:'',//姓名
                username:'',//身份证号
                update_time:'',//发证日期
                start_time:'',//开始时间
                score_finish_time:'',//发证日期
                gender:'',//性别
                subjectTitle:'',//培训科目
                score_loglist:[
                ],
                score_sum:0,//学时合计
                cert_num:1010011101111,//证书编号
                subjectTitleFull:''
            },
            listData:[],
            baseURL:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
        };
    },
    methods: {
        open(item){
            this.dialogVisible = true
            Object.assign(this.fromData,item,{start_time:this.$moment(item.start_time).format("YYYY年MM月DD日"),score_finish_time:this.$moment(item.score_finish_time).format("YYYY年MM月DD日")})
            this.listData=[this.fromData]
        },
    },
}
</script>
<style lang="scss" scoped>
.A4page {
  width: calc(595.28px * 2);
  height: calc(846.1px * 2);
  // width:calc(595px * 1.5);
  // height:calc(840px * 1.5);
  // background:url('~@/assets/logo/pdfbg.png') no-repeat;
  background-size: 100%;
  overflow: hidden;
  -webkit-print-color-adjust: exact;
  color: #000;
  position: relative;
  & > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  .pagesContent {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 45px 100px;
    overflow: auto;
    .pagesContentItem {
      height: calc(100%);
      .pagesContentTitle {
        width: 100%;
        height: 130px;
        // background: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        span {
          font-size: 40px;
        }
      }
      .pagesContentitemRocer {
        font-size: 24px;
        text-indent: 48px;
        min-height: 80px;
        // background: #fff;
      }
      .pagesContentitemXs {
        // background: #0f0;
        height: 730px;
        .pagesContentitemXsSpan {
          font-size: 20px;
        }
        .table {
          // border:1px solid #333;
          height: 70px;
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid #333;
          &::after {
            content: "";
            height: 70px;
            width: 1px;
            background: #333;
          }
          p {
            padding: 0 20px;
            margin: 0;
            flex: 1;
            // font-size: 20px;
          }
          span {
            display: flex;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            width: 120px;
            height: 100%;
            align-items: center;
            border-left: 1px solid #333;
          }
        }
        .tableBox {
          display: flex;
          padding: 20px 0;
          flex-wrap: wrap;
          .beforeBorder {
            &::before {
              content: "";
              height: 70px;
              width: 1px;
              background: #333;
            }
          }
          .bottomBorder {
            border-bottom: 1px solid #333;
          }
        }
      }
      .pagesContentitemFs {
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        div {
          // border:1px solid #333;
          height: 50px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid #333;
          border-bottom: 1px solid #333;
          border-left: 1px solid #333;
          &::after {
            content: "";
            height: 50px;
            width: 1px;
            background: #333;
          }
          p {
            text-align: center;
            padding: 0 20px;
            margin: 0;
            flex: 1;
            // font-size: 20px;
          }
          span {
            display: flex;
            justify-content: center;
            font-size: 20px;
            font-weight: 600;
            width: 40%;
            height: 100%;
            align-items: center;
            border-left: 1px solid #333;
          }
        }
      }
      .pagesContentitemInfor {
        position: relative;
        padding-left: 50px;
        margin-bottom: 20px;
        // height: 280px;
        ul {
          line-height: 50px;
          display: flex;
          font-size: 24px;
          font-family: "黑体";
          margin: 0;
          .Title {
            width: 96px;
            text-align-last: justify;
            text-align: justify;
          }
        }
        .imgBox {
          position: absolute;
          right: 0;
          top: 20px;
          width: 500px;
          // height: 180px;
          display: flex;
          justify-content: flex-end;
          & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            & > div {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 160px;
              border: 1px solid #eee;
              & > img {
                max-width: 120px;
              }
            }
            & > p {
              margin: 0;
              margin-top: 20px;
            }
          }
        }
      }

      .pagesContentitemFooter {
        height: 180px;
        // background: #00f;
        padding: 0 50px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 24px;
        position: relative;
        .pagesContentitemFooterBox {
          width: 100%;
          // background: #0ff;
          display: flex;
          justify-content: space-between;
          font-family: "黑体";
          font-weight: 600;
          .erweima {
            position: absolute;
            width: 120px;
            height: 120px;
            bottom: 22%;
            left: 5%;
          }
          .pagesContentitemFooterBoxLeft {
            display: flex;
            align-items: center;
            p {
              margin: 0;
            }
          }
          .pagesContentitemFooterBoxRight {
            display: flex;
            align-items: center;
            min-width: 300px;
            p {
              margin: 0;
            }
          }
        }
        & > img {
          position: absolute;
          height: 200px;
          width: 200px;
          left: 75%;
          top: 30%;
          z-index: -1;
        }
      }
    }
  }
}
@media print {
  .A4page {
    width: calc(595.28px * 2);
    height: calc(841px * 2);
  }
}
</style>